<template>
  <view class="page">
    <view class="title" style="display: flex; justify-content: space-between">
      <view>用户列表</view>
      <view
        class="refresh-btn"
        :class="refreshed ? 'rotate' : ''"
        @click="refreshClicked"
      ></view>
    </view>
    <view class="user-table">
      <table class="pure-table pure-table-bordered">
        <tr>
          <th v-for="ita in dict" :key="ita">{{ ita }}</th>
        </tr>
        <tr v-for="(item, ind1) in userData" :key="(item, ind1)">
          <td>{{ ind1 + 1 }}</td>
          <td v-for="(it2, index) in item" :key="(it2, index)">{{ it2 }}</td>
          <td
            class="delete-option"
            @click="deleteData(ind1)"
            title="删除用户"
          ></td>
        </tr>
      </table>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dict: ["序号", "手机", "注册时间", "昵称", "性别", "操作"],
      userData: [
        { phone: "xxx", signUpTime: "yyy", nickname: "zzz", sex: "www" },
      ],
      refreshed: false,
    };
  },
  onLoad: function () {
    this.getAllUser();
  },
  methods: {
    refreshClicked: function () {
      if (this.refreshed === true) {
        return;
      }
      this.refreshed = true;
      this.getAllUser();
      setTimeout(() => {
        this.refreshed = false;
      }, 20000);
    },
    deleteData: function (index) {
      uni.showModal({
        content: "确定删除该记录吗",
        title: "提示",
        confirmText: "删除",
        confirmColor: "red",
        cancelText: "取消",
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
          alert("操作失败");
        },
      });
      let postData = {
        phone: this.userData[index].phone,
      };
      console.log(postData);
    },
    getAllUser: function () {
      this.$http
        .post(this.$api.admin, { option: "showAllUser" })
        .then((res) => {
          //   console.log(res.data.userPhones);
          let phones = res.data.userPhones;
          this.userData = [];
          for (let i = 0; i < phones.length; i++) {
            this.getOneUserIno(phones[i]);
          }
        })
        .catch((err) => {
          alert("用户数据请求失败");
          console.log(err);
        });
    },
    getOneUserIno: function (phone) {
      let postData = {
        option: "getUserInfo",
        phone: phone,
      };
      this.$http
        .post(this.$api.admin, postData)
        .then((res) => {
          //   console.log(res.data);
          let oneUser = {
            phone: res.data.user_phone,
            signUpTime: res.data.user_registertime,
            nickname: res.data.user_name,
            sex: res.data.user_sex,
          };
          this.userData.push(oneUser);
        })
        .catch((err) => {
          console.log(err);
          alert("单个用户数据请求出错");
        });
    },
  },
};
</script>

<style>
.refresh-btn::before {
  font-family: "codicon";
  cursor: pointer;
  color: grey;
  font-size: 30px;
  content: "\eb37";
}
.rotate {
  transition: 1s;
  transform: rotate(360deg);
}
.title {
  padding: 20px 40px 0 40px;
  font-size: 40px;
}
.user-table {
  padding: 20px 40px 40px 40px;
}
.page {
  max-width: 1200px;
  margin: 75px auto;
  background-color: white;
  height: 100%;
  font-size: 20px;
  box-shadow: 0 0 20px rgb(48, 98, 48);
}
.inline-text {
  font-size: 20px;
}
</style>